import React from "react";
import { NavLink } from "react-router-dom";

import ExitToAppIcon from "@material-ui/icons/ExitToApp";

import { useTranslation } from "react-i18next";
import { USER_TOKEN_NAME } from "../../../config";
import Button from "@material-ui/core/Button";

const SidebarFooter = () => {
  const { t } = useTranslation();

  const logOutUser = () => {
    localStorage.removeItem(USER_TOKEN_NAME);
  };

  return (
    <>
      <div className="app-sidebar--footer ">
        <Button>
          <NavLink
            activeClassName="active"
            className="sidebar-footer-btn opacity-8  "
            onClick={() => logOutUser()}
            to="/login"
          >
            <span className="sidebar-icon opacity-6 ml-1 mb-2">
              <ExitToAppIcon className="logout-icon mt-1" />
            </span>
            <span className="ml-3  font-size-lg">{t("sidebar:log_out")}</span>
          </NavLink>
        </Button>
      </div>
    </>
  );
};

export default SidebarFooter;
